<template>
    <div class="title">
        <div class="title-left" @click="goToShop">
            <image class="shop-icon" resize="cover" :src="shopIconImg"></image>
            <text class="shop-name font-msyhl" :style="{fontSize: fontSize}">{{sname}}</text>
            <image v-if="hasArrow" class="right-arrow-icon" resize="cover" :src="rightArrowImg"></image>
        </div>

        <text v-if="hasStatus" class="title-right font-msyhl" :style="{fontSize: fontSize}">{{status}}</text>
    </div>
</template>
<style scoped>

.title {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    padding-left: 30px;
    padding-right: 30px;
    background-color: #fff;
}
.title-left {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.shop-icon {
    width: 30px;
    height: 30px;
    margin-right: 4px;
}
.shop-name {
    color: #313131;
}
.right-arrow-icon {
    width: 28px;
    height: 28px;
    margin-left: 4px;
}
.title-right {
    color: #e31336;
}
.font-msyhl {
    font-family: msyhl;
}
</style>
<script>
    import shopIconImg from 'assets/images/shop-ico.png';
    import rightArrowImg from 'assets/images/right-arrow.png';
    import navigator from "utils/navigator";
    import route from 'constants/route';

    export default{
        props: {
            sid: {
                type: String,
                default: null,
            },
            shopType: {
                type: String,
                default: null,
            },
            sname: {
                type: String,
                default: ""
            },
            status: {
                type: String,
                 default: ""
            },
            hasArrow: {
                type: Boolean,
                default: true
            },
            hasStatus: {
                type: Boolean,
                default: false
            },
            fontSize: {
                type: Number,
                default: 26
            }
        },
        data(){
            return{
                shopIconImg: shopIconImg,
                rightArrowImg: rightArrowImg
            }
        },
        methods: {
            goToShop(){
                if(!this.hasArrow) return false;
                if(this.shopType){ //大店铺shoptype
                    let _options = {
                        url: route.shop_index,
                        title: this.sname || "商家店铺",
                        params: {
                            shopType: this.shopType
                        }
                    };
                    navigator.push(_options);
                } else {  //小店铺sid
                    let _options = {
                        url: route.shop_plus,
                        title: this.sname || "店铺详情",
                        params: {
                            sid: this.sid
                        }
                    };
                    navigator.push(_options);
                }
            }
        }
    }
</script>
